<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>查看社保方案</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer viewCasePage">
      <!-- 社保表单 -->
      <div class="customform shebaoform">
        <el-form
          :inline="true"
          label-width="120px"
          label-position="left"
        >
          <div class="el-form--inline">
            <el-form-item label="参保地">
              <div class="el-input form-control-static">{{product.addrName}}</div>
            </el-form-item>
            <el-form-item label="服务公司">
              <div class="el-input form-control-static">{{product.optrCompName}}</div>
            </el-form-item>
            <el-form-item label="社保账户">
              <div class="el-input form-control-static">{{product.account}}</div>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="方案名称">
              <div class="el-input form-control-static">{{product.productName}}</div>
            </el-form-item>
            <el-form-item label="户口性质">
              <div class="el-input form-control-static">
                 <span v-for="(item ,index) in (product.hukouTypeCode || '').split(',')" :key="index">{{Gloab.dataCode[item]}}, </span>
              </div>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="总合计精确度">
              <div class="el-input form-control-static">{{Gloab.dataCode[product.calAccuCode]}}</div>
            </el-form-item>
            <el-form-item label="单位精确度">
              <div class="el-input form-control-static">{{Gloab.dataCode[product.compCalAccuCode]}}</div>
            </el-form-item>
            <el-form-item label="个人精确度">
              <div class="el-input form-control-static">{{Gloab.dataCode[product.empCalAccuCode]}}</div>
            </el-form-item>
          </div>
          <div class="el-form--inline">
            <el-form-item label="生效年月">
              <div class="el-input form-control-static">{{product.startDate}}</div>
            </el-form-item>
            <el-form-item label="备注">
              <div class="el-input form-control-static">{{product.comment}}</div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <!-- 社保表单结束 -->
      <!-- 表格资料 -->
      <div class="zy-form my-table">
        <template>
          <el-table class="my-table" :data="tableData3" style="width: 100%">
            <el-table-column
              align="center"
              type="index"
              :index="indexMethod"
              label="序号"
              width="100"
            ></el-table-column>
            <el-table-column align="center" prop="itemTypeCode" label="险种类别">
              <template slot-scope="scope">
                <span>{{Gloab.dataCode[scope.row.itemTypeCode]}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="maleAgeMin" label="最小年龄"></el-table-column>
            <el-table-column align="center" prop="maleAgeMax" label="男最大年龄"></el-table-column>
            <el-table-column align="center" prop="femaleAgeMax" label="女最大年龄"></el-table-column>
            <el-table-column label="单位精度" align="center">
              <el-table-column label="精度" align="center">
                <template slot-scope="scope">{{Gloab.dataCode[scope.row.compCalAccuCode]}}</template>
              </el-table-column>
              <el-table-column label="基数范围" align="center">
                <template slot-scope="scope">{{scope.row.compBaseMin}}-{{scope.row.compBaseMax}}</template>
              </el-table-column>
              <el-table-column label="比例" align="center">
                <template slot-scope="scope">{{scope.row.compRatio}}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="个人精度" align="center">
              <el-table-column label="精度" align="center">
                <template slot-scope="scope">{{Gloab.dataCode[scope.row.empCalAccuCode]}}</template>
              </el-table-column>
              <el-table-column label="基数范围" align="center">
                <template slot-scope="scope">{{scope.row.empBaseMin}}-{{scope.row.empBaseMax}}</template>
              </el-table-column>
              <el-table-column label="比例" align="center">
                <template slot-scope="scope">{{scope.row.empRatio}}</template>
              </el-table-column>
            </el-table-column>
            <el-table-column align="center" prop="table8" label="收费频率">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top" popper-class="custom-popover">
                  <p>收费规则:{{ scope.row.ruleType }}</p>
                  <div slot="reference" class="name-wrapper">{{ scope.row.ruleType }}</div>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </template>

        <div class="page-form-btn">
          <el-button @click="back">取消</el-button>
          <el-button type="primary" @click="edit">编辑</el-button>
        </div>
      </div>
      <!-- 表格资料结束 -->
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
export default {
  name: "viewCase",
  data() {
    return {
      // 险种列表
      mechanism: ["单位", "个人"],
      tableData3: [],
      product:{}
    };
  },
  created() {
    console.log(this.Gloab.dataCode)
    this.getDetail();
  },
  methods: {
    getDetail() {
      Http.api.get("/case/socialproduct/"+this.$route.query.id).then(res => {
          this.product = res.data;
          console.log(res.data.items)
          this.tableData3 = res.data.items;
      });
    },
    //编辑
    edit() {
      this.$router.push({ path: "/case/edit",query:{id:this.$route.query.id} });
    },
    indexMethod(index) {
      return index + 1;
    },
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
